<template>
  <div class="goods-wrapper">
    <div v-for="item of goods" :key="item.material_id" :style="{width: imgWrapperStyle(item.w), height: imgWrapperStyle(item.h), left: imgWrapperStyle(item.x), top: imgWrapperStyle(item.y)}" class="goods-item">
      <img :src="item.img_url" />
    </div>
  </div>
</template>

<script>
export default {
  props: ['goods'],
  methods: {
    imgWrapperStyle(val) {
      if (val) {
        val = val.toString();
        return `${val.slice(0, 1)}.${val.slice(1)}rem`;
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .goods-wrapper {
    position: relative;
    width: 7.2rem;
    height: 5.08rem;
    .goods-item {
      position: absolute;
    }
    img {
      width: 100%;
    }
  }
</style>